import { Popup, NavBar } from "antd-mobile"

import CommentItem from "../CommentItem"
// import CommentFooter from "../CommentFooter"
// import CommentInput from "../CommentInput"
import NoneComment from "../NoneComment"
import { ArtComment } from "@/types/data"
import styles from "./index.module.scss"
import { useState, useEffect } from "react"
import { ArticleCommentResponse, ArticleComment } from "@/types/data"
import { http } from "@/utils/http"
type Props = {
  onClose: () => void
  commentItem: ArtComment
}

const Reply = ({ onClose, commentItem }: Props) => {
  const [originComment, setOriginComment] = useState(commentItem)
  // 拿到原始评论的 id
  const { com_id } = originComment
  // 评论项的回复列表状态
  const [commentReply, setCommentReply] = useState({} as ArticleComment)
  useEffect(() => {
    const loadDdata = async () => {
      const res = (await http.get("/comments", {
        params: {
          type: "c",
          source: com_id,
        },
      })) as ArticleCommentResponse
      setCommentReply(res.data)
    }
    loadDdata()
  }, [com_id])
  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        <NavBar className="transparent-navbar" onBack={onClose}>
          {commentItem.reply_count}条回复
        </NavBar>

        {/* 要回复的评论 */}
        <div className="origin-comment">
          <CommentItem type="origin" />
        </div>

        <div className="reply-list">
          <div className="reply-header">全部回复</div>
          {commentReply.total_count > 0 ? commentReply.results.map((item) => <CommentItem key={item.com_id} {...item} type="reply" />) : <NoneComment />}
        </div>

        {/* <CommentFooter type="reply" /> */}
      </div>

      {/* 回复文本框对应的抽屉 */}

      <Popup className="reply-popup" position="bottom" visible={false}>
        {/* <CommentInput /> */}
      </Popup>
    </div>
  )
}

export default Reply
